import React, { useState } from 'react';

const SettingsPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState('general');

  return (
    <div className="bg-white p-6 rounded-lg shadow-md">
      <h1 className="text-2xl font-bold mb-4">系统设置</h1>
      
      <div className="flex border-b mb-4">
        <button 
          className={`px-4 py-2 ${activeTab === 'general' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500'}`}
          onClick={() => setActiveTab('general')}
        >
          基本设置
        </button>
        <button 
          className={`px-4 py-2 ${activeTab === 'security' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500'}`}
          onClick={() => setActiveTab('security')}
        >
          安全设置
        </button>
        <button 
          className={`px-4 py-2 ${activeTab === 'notification' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500'}`}
          onClick={() => setActiveTab('notification')}
        >
          通知设置
        </button>
      </div>

      {activeTab === 'general' && (
        <div>
          <div className="mb-4">
            <label className="block text-gray-700 mb-2">系统名称</label>
            <input type="text" className="w-full px-3 py-2 border rounded" defaultValue="管理系统" />
          </div>
          <div className="mb-4">
            <label className="block text-gray-700 mb-2">公司名称</label>
            <input type="text" className="w-full px-3 py-2 border rounded" defaultValue="XX科技有限公司" />
          </div>
          <div className="mb-4">
            <label className="block text-gray-700 mb-2">时区设置</label>
            <select className="w-full px-3 py-2 border rounded">
              <option>(GMT+08:00) 北京，重庆，香港，乌鲁木齐</option>
              <option>(GMT+09:00) 大阪，札幌，东京</option>
              <option>(GMT+00:00) 格林威治标准时间</option>
            </select>
          </div>
          <button className="bg-blue-500 text-white px-4 py-2 rounded">保存设置</button>
        </div>
      )}

      {activeTab === 'security' && (
        <div>
          <div className="mb-4">
            <label className="block text-gray-700 mb-2">密码策略</label>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" defaultChecked />
              <span>最小长度8位</span>
            </div>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" defaultChecked />
              <span>必须包含大小写字母</span>
            </div>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" defaultChecked />
              <span>必须包含特殊字符</span>
            </div>
          </div>
          <div className="mb-4">
            <label className="block text-gray-700 mb-2">登录设置</label>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" />
              <span>启用双因素认证</span>
            </div>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" defaultChecked />
              <span>登录失败5次锁定帐户</span>
            </div>
          </div>
          <button className="bg-blue-500 text-white px-4 py-2 rounded">保存设置</button>
        </div>
      )}

      {activeTab === 'notification' && (
        <div>
          <div className="mb-4">
            <label className="block text-gray-700 mb-2">通知方式</label>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" defaultChecked />
              <span>电子邮件</span>
            </div>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" defaultChecked />
              <span>短信</span>
            </div>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" />
              <span>站内消息</span>
            </div>
          </div>
          <div className="mb-4">
            <label className="block text-gray-700 mb-2">通知事件</label>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" defaultChecked />
              <span>新订单</span>
            </div>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" defaultChecked />
              <span>订单状态变更</span>
            </div>
            <div className="flex items-center mb-2">
              <input type="checkbox" className="mr-2" defaultChecked />
              <span>系统公告</span>
            </div>
          </div>
          <button className="bg-blue-500 text-white px-4 py-2 rounded">保存设置</button>
        </div>
      )}
    </div>
  );
};

export default SettingsPage; 